<!--
    门店系统第一个页面 哈哈哈
    页面介绍：进销存报表
    时间：2018-5-11
    创建人：Lt
-->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>进销存报表</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="${contextPath}/static/layer/css/layui.css">
    <link rel="stylesheet" href="${contextPath}/static/layer/laydate/theme/default/laydate.css">
    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="${contextPath}/static/statistics/js/vue.js"></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
    <!-- 数型插件 -->
    <link href="${contextPath}/static/ztree/css/zTreeStyle.css" rel="stylesheet" />
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.excheck-3.5.js"></script>

    <style>
        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }
    </style>
</head>
<body>
<div class="container-fluid" id="app">
    <form class="form-inline" style="margin-top: 50px; margin-bottom: 5px;">
        <div class="form-group" style="width: 100%; margin-bottom: 5px;">
            <label for="">区域：</label>
            <input type="text" class="form-control" id="zoneName" placeholder="" style="width: 120px; margin-left: 28px;" readonly />
            <input type="text" class="form-control" id="zoneId" placeholder="" style="width: 120px; display: none;"/>

            <label for="" style="margin-left: 25px">供应商：</label>
            <select class="form-control" style="width: 119px; margin-left: 15px;">
                <option selected>请选择</option>
                <option :value="obj.supplierName" :name="obj.supplierId" v-for="obj in supplierObj">{{ obj.supplierName }}</option>
            </select>
        </div>


        <div class="form-group" style="width: 100%; margin-bottom: 5px;">
            <label for="">门店：</label>
            <select class="form-control" style="width: 120px; margin-left: 32px;">
                <option selected>请选择</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>

            <label for="" style="margin-left: 25px">商品类别：</label>
            <select class="form-control" style="width: 120px; margin-left: 0px;">
                <option selected>请选择</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>

            <select class="form-control" placeholder="是否细支" style="width: 80px;">
                <option selected>请选择</option>
                <option>是</option>
                <option>否</option>
            </select>
        </div>

        <div class="form-group">
            <label for="">开始时间：</label>
            <input type="text" class="form-control" id="beginTime" placeholder="开始时间" style="width: 120px;"/>

            <label for="" style="margin-left: 25px">结束时间：</label>
            <input type="text" class="form-control" id="endTime" placeholder="结束时间" style="width: 120px;"/>

            <input type="text" class="form-control" id="Time" placeholder="便捷日期选择器" style="width: 120px;"/>
        </div>
        <button type="button" class="btn btn-success" v-on:click="queryUserInfo" style="margin-left: 10px;">查询</button>

    </form>
    <div class="row" style="background-color: rgb(53, 147, 202); margin-right: 0px; margin-left: 0px; height: 37px;">
        <div class="col-sm-10" style="margin-top: 6px;">
            <strong style="font-size: 18px; color: #f9f9f9;">进销存报表</strong>
        </div>
        <div class="col-sm-2" style="text-align: right;"></div>
    </div>
    <div class="table-responsive" id="tableContainer" style="height: 410px">
        <table class="table table-striped table-condensed table-bordered" style="width: 3500px;">
            <thead style="background-color: #eee;">
            <tr>
                <td>行号</td>
                <td>区域编码</td>
                <td>区域名称</td>
                <td>分店编号</td>
                <td>分店名称</td>
                <td>类别编码</td>
                <td>类别名称</td>
                <td>货号</td>
                <td>品名</td>
                <td>经营方式</td>
                <td>品牌</td>
                <td>品牌名称</td>
                <td>供应商名称</td>
                <td>规格</td>
                <td>单位</td>
                <td>期初数量</td>
                <td>期初成本金额</td>
                <td>期初售价金额</td>
                <td>采购数量</td>
                <td>采购金额</td>
                <td>批发数量</td>
                <td>批发金额</td>
                <td>pos数量</td>
                <td>pos金额</td>
                <td>销售成本</td>
                <td>调入数量</td>
                <td>调入金额</td>
                <td>调出数量</td>
                <td>调出金额</td>
                <td>其它数量</td>
                <td>其它金额</td>
                <td>结存数量</td>
                <td>结存成本金额</td>
                <td>结存售价金额</td>
                <td>成本调整金额</td>
                <td>销售毛利</td>
                <td>不含税结存金额</td>
                <td>不含税采购金额</td>
                <td>调出成本金额</td>
                <td>调入成本金额</td>
                <td>其他成本金额</td>
                <td>成本差异金额</td>
                <td>销售扣补金额</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(obj, index) in objects">
                <td>{{ index + 1 }}</td>
                <td>{{ obj.userId }}</td>
                <td>{{ obj.userName }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ index + 1 }}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div style="text-align: right; margin-top: 10px;" id="pageDiv"></div>

    <!-- 数型内容 -->
    <div id="authorizationInfoContent" class="hide">
        <div class="content_wrap">
            <div class="zTreeDemoBackground left">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
    </div>
</div>
<script src=${contextPath}/static/layer/layui.all.js></script>
<script src=${contextPath}/static/layer/laydate/laydate.js></script>

<%--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>--%>
<script>
    var laypage = layui.laypage,
        layer = layui.layer
    laydate = layui.laydate;

    var queryModel = {
        //分页参数
        page: '1',
        rows: '10',
    }

    var app = new Vue({
        el: '#app',
        data: {
            objects: [],
            areaObjects: [],
            supplierObj: [],
        },
        methods: {
            queryUserInfo: function () {
                queryObjects()
            }
        }
    })

    app.areaObjects = [
        {areaName: '区域1'},
        {areaName: '区域2'},
        {areaName: '区域3'},
        {areaName: '区域4'},
        {areaName: '区域5'}
    ]

    //执行一个laydate实例
    laydate.render({
        elem: '#beginTime' //指定元素
        ,format: 'yyyy-MM-dd' //可任意组合
    });

    //执行一个laydate实例
    laydate.render({
        elem: '#endTime' //指定元素
        ,format: 'yyyy-MM-dd' //可任意组合
    });

    laydate.render({
        elem: '#btTime' //指定元素
        ,format: 'yyyy-MM-dd' //可任意组合
    });

    var getObjects = function (queryModel) {
        // console.log(queryModel)
        layer.load(1)
        $.ajax({
            url: '${contextPath}/ktcount/gatKtClassifiedTobaccoSales',
            type: 'post',
            data: queryModel,
            success: function (data) {
                layer.closeAll('loading');
                if (data.success == false){
                    layer.msg("获取出错："+data.message)
                    return
                }
                var dataArray = data.data;
                if (dataArray.length == 0){
                    layer.msg("查询没有数据")
                    return
                }
                // console.log(dataArray)
                app.objects = dataArray;

            },
            error: function (error) {
                layer.closeAll('loading')
            }
        })
    }

    var queryObjects = function () {
        queryModel.userId = $("#userId").val()
        getObjects(queryModel)
    }

    var getSupplier = function () {
        $.ajax({
            url: '${contextPath}/ktPurchase/getSupplierListByPage',
            type: 'post',
            data: queryModel,
            success: function (data) {
                console.log(data)
//                layer.closeAll('loading');
                if (data.success == false) {
                    layer.msg("获取出错：" + data.message)
                    layer.closeAll('loading')
                    return
                }
                var dataArray = data.recordList;
                app.supplierObj = dataArray;
            },
            error: function (error) {
                layer.closeAll('loading')
//                layer.closeAll('loading')
            }
        })
    }


    $(function () {
        getObjects(queryModel);   //获取数据列表
        getSupplier();    //获取供应商列表

    })

</script>
<!-- 数型插件 -->
<script type="text/javascript">
    $("#zoneName").click(function(){
        layer.load(1);
//        var id = $(grid_product_selector).jqGrid('getGridParam', 'selrow');
//        if (!id) {
//            $.jgrid.info_dialog( "提示：", "请选择一条角色信息");
//            return;
//        }


        var filters = {
            "rules": [
                {"field": "parentId", "data": '0'},
            ]
        };
        var queryModels = {
            page: '1',
            rows: '10000',
//            filters: JSON.stringify(filters),
        };

        var setting = {
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parentId",
                    rootPId: '0',
                },
                key: {
                    name: 'zoneName'
                }
            },
            async: {
                enable: false, // 设置 zTree是否开启异步加载模式  加载全部信息
                url: "${contextPath}/ktProd/getProdType", // Ajax 获取数据的 URL 地址
                autoParam: ["0"],    // 异步加载时自动提交父节点属性的参数,假设父节点 node = {id:1, name:"test"}，异步加载时，提交参数 zId=1
//                dataFilter: queryModels,
            },
            callback: { //回调函数
                /**
                 * event:鼠标事件
                 * treeId：树的容器id
                 * treeNode：当前点击的节点
                 */
                //双击
                onDblClick: function (treeId, treeNode) {
                    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                    var node = treeObj.getSelectedNodes();//点击节点后 获取节点数据
//                    console.log(node)
//                    console.log(node[0].zoneName)
                    $("#zoneName").val(node[0].zoneName)
                    $("#zoneId").val(node[0].id)

                    layer.close(modalIndex)
                }
            }
        }

        var zNodes =[];


        $.ajax({
            url : "${contextPath}/ktCommon/getZoneListByPage",
            type : "get",
            data : queryModels,
            dataType : "json",
            async : false,
            success : function(data) {
                layer.closeAll('loading');
                var dataArray = data.recordList;
//                for (var i=0;i<dataArray.length;i++){
//                    var array = dataArray[i];
//                    array.name = array.typeName;
//                    zNodes.push(array)
//                }
//                console.log(dataArray)
                $.fn.zTree.init($("#treeDemo"), setting, dataArray);
                $("#authorizationInfoContent").removeClass("hide")
                modalIndex = layer.open({
                    type: 1,
                    title: '区域列表',
                    closeBtn: 1,
                    shadeClose: true,
                    maxmin: true,
                    area: ['300px', '450px'],
                    skin: 'yourclass',
                    content: $("#authorizationInfoContent"),
                    end: function () {
                        $("#authorizationInfoContent").addClass("hide")
                    }
                });
            },
            error : function () {
                layer.closeAll('loading');
                layer.msg("网络异常")
            }
        });
    })
</script>
</body>
</html>